<!-- 预览区域-component -->
<template>
  <div
    class="lg:flex lg:h-screen lg:overflow-hidden w-full bg-white dark:bg-dark-background animate-expand fixed z-50"
  >
    <div
      class="mobile:flex-col fixed left-0 right-0 top-0 bottom-0 z-40 h-full w-full bg-white dark:bg-dark-background mobile:z-50"
    >
      <!-- 顶部区域 -->
      <div
        class="mobile:pb-0 mobile:flex mobile:flex-col select-none items-center px-3.5 py-4 lg:grid lg:grid-cols-3 lg:py-3"
      >
        <!-- 左 -->
        <div
          class="mobile:relative mobile:w-full flex mobile:flex-row-reverse mobile:justify-center items-center justify-between lg:w-auto lg:justify-start"
        >
          <div
            :title="i18nStore.translate('exit_preview')"
            @click="exitPreview"
            class="mobile:absolute mobile:left-0 order-last -m-3 cursor-pointer p-3 lg:order-none hover:bg-light-background dark:hover:bg-2x-dark-foreground"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16px"
              height="16px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="vue-feather feather feather-x"
            >
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </div>
          <div class="flex items-center">
            <div class="mobile:mr-0 mr-3 ml-0 flex items-center lg:mx-3">
              <span
                :title="fileStore.curFileInfo.name"
                class="mobile:text-lg mobile:max-w-[260px] inline-block max-w-[230px] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
              >
                {{ fileStore.curFileInfo.name }}
              </span>
              <!-- <span class="ml-1 text-sm font-bold"> (1 于 1) </span> -->
            </div>
            <div class="popover-wrapper mobile:hidden">
              <span class="-m-3 p-3"
                ><div
                  :title="i18nStore.translate('more_options')"
                  class="inline-block rounded-md bg-light-background py-0.5 px-1.5 align-middle transition-all duration-200 dark:bg-dark-foreground lg:bg-transparent hover:bg-light-background dark:hover:bg-2x-dark-foreground"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="14px"
                    height="14px"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="feather feather-more-horizontal"
                  >
                    <circle cx="12" cy="12" r="1"></circle>
                    <circle cx="19" cy="12" r="1"></circle>
                    <circle cx="5" cy="12" r="1"></circle>
                  </svg></div
              ></span>
              <!---->
            </div>
          </div>
        </div>
        <!-- 中 -->
        <small
          class="mobile:text-sm text-center text-tiny font-normal text-gray-600 lg:block"
        >
          {{
            fileStore.curFileInfo.size +
            ' ' +
            i18nStore.translate('date', fileStore.curFileInfo.times)
          }}
        </small>
        <!-- 右 -->
        <div
          class="items-center lg:flex lg:justify-end mobile:flex mobile:z-50"
        >
          <div>
            <button
              @click="zoomOut"
              :title="i18nStore.translate('zoom_out')"
              class="group inline-flex h-[42px] w-[42px] cursor-pointer items-center justify-center rounded-lg hover:bg-light-background dark:hover:bg-2x-dark-foreground hover:text-theme-color"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="19px"
                height="19px"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="vue-feather group-hover-text-theme feather feather-zoom-out"
              >
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                <line x1="8" y1="11" x2="14" y2="11"></line>
              </svg>
            </button>
            <button
              @click="zoomIn"
              :title="i18nStore.translate('zoom_in')"
              class="group inline-flex h-[42px] w-[42px] cursor-pointer items-center justify-center rounded-lg hover:bg-light-background dark:hover:bg-2x-dark-foreground hover:text-theme-color"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="19px"
                height="19px"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="vue-feather group-hover-text-theme feather feather-zoom-in"
              >
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                <line x1="11" y1="8" x2="11" y2="14"></line>
                <line x1="8" y1="11" x2="14" y2="11"></line>
              </svg>
            </button>
          </div>
          <div class="ml-5">
            <button
              @click="downloadFile"
              :title="i18nStore.translate('download')"
              class="group inline-flex h-[42px] w-[42px] cursor-pointer items-center justify-center rounded-lg hover:bg-light-background dark:hover:bg-2x-dark-foreground hover:text-theme-color"
            >
              <i v-if="isDownloadLoading" class="pi pi-spin pi-spinner"></i>
              <svg
                v-else
                xmlns="http://www.w3.org/2000/svg"
                width="19px"
                height="19px"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="vue-feather group-hover-text-theme feather feather-download-cloud"
              >
                <polyline points="8 17 12 21 16 17"></polyline>
                <line x1="12" y1="12" x2="12" y2="21"></line>
                <path
                  d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"
                ></path>
              </svg>
            </button>
            <button
              @click="flagStore.setShareBoardOpen(true)"
              :title="i18nStore.translate('share_item')"
              class="group inline-flex h-[42px] w-[42px] cursor-pointer items-center justify-center rounded-lg hover:bg-light-background dark:hover:bg-2x-dark-foreground hover:text-theme-color"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="19px"
                height="19px"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="vue-feather group-hover-text-theme feather feather-link"
              >
                <path
                  d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
                ></path>
                <path
                  d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- 内容区域 -->
      <div
        class="absolute top-[56px] left-0 right-0 bottom-0 select-none lg:top-[66px] mobile:top-28 mobile:bottom-10"
      >
        <div class="flex h-full w-full items-center justify-center">
          <div
            @transitionend="handleTransitionEnd"
            class="absolute bottom-0 top-0 left-0 right-0 z-10 mx-auto overflow-y-auto rounded-xl md:p-5 transition-all"
            :style="{ width: `${zoomRadio}%` }"
          >
            <!-- 预览器 -->
            <div
              v-show="!flagStore.isPreviewSpinnerShow"
              class="flex items-center justify-center h-full"
            >
              <!-- 根据文件类型选择不同的预览器 -->
              <ImagePreviewer
                v-if="fileStore.curFileInfo.fileType.type === 'image'"
              />
              <PdfPreviewer
                v-else-if="fileStore.curFileInfo.fileType.type === 'file-pdf'"
              />
              <AudioPreviewer
                v-else-if="fileStore.curFileInfo.fileType.type === 'audio'"
              />
              <VideoPreviewer
                v-else-if="fileStore.curFileInfo.fileType.type === 'video'"
              />
              <ExcelPreviewer
                v-else-if="fileStore.curFileInfo.fileType.type === 'file-excel'"
              />
              <WordPreviewer
                v-else-if="fileStore.curFileInfo.type === 'docx'"
              />
              <TxtPreviewer
                v-else-if="fileStore.curFileInfo.fileType.type === 'file-edit'"
              />
              <CodePreviewer
                v-else-if="fileStore.curFileInfo.fileType.type === 'code'"
              />
              <!-- <WordPreviewer v-else-if="fileStore.curFileInfo.fileType.type === 'file-word'" /> -->
              <!-- <PptPreviewer v-else-if="fileStore.curFileInfo.type === 'ppt' || 'pptx'" /> -->
              <NonSupportPreviewer v-else />
            </div>

            <!-- spinner -->
            <div
              v-if="flagStore.isPreviewSpinnerShow"
              class="flex items-center justify-center h-full"
            >
              <ProgressSpinner
                style="width: 40px; height: 40px"
                strokeWidth="4"
                animationDuration=".5s"
                :pt="{
                  circle: {
                    class: 'stroke-theme-color',
                    style: {
                      animation:
                        'p-progress-spinner-dash 1.5s ease-in-out infinite'
                    }
                  }
                }"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  useFlagStore,
  useFileStore,
  useI18nStore,
  useToastStore
} from '@/stores';
const toastStore = useToastStore();

const flagStore = useFlagStore();
const fileStore = useFileStore();
const i18nStore = useI18nStore();

const isDownloadLoading = ref(false);

const zoomRadio = ref(40);

// 根据不同类型动态设置缩放初始值
watch(
  () => fileStore.curFileInfo,
  () => {
    switch (fileStore.curFileInfo.fileType.type) {
      case 'image':
        if (window.innerWidth < 1024) {
          zoomRadio.value = 80;
          break;
        }
        zoomRadio.value = 20;
        break;
      case 'file-pdf':
        if (window.innerWidth < 1024) {
          zoomRadio.value = 60;
          break;
        }
        zoomRadio.value = 50;
        break;
      case 'file-excel':
        if (window.innerWidth < 1024) {
          zoomRadio.value = 80;
          break;
        }
        zoomRadio.value = 50;
        break;
      case 'file-word':
        if (window.innerWidth < 1024) {
          zoomRadio.value = 80;
          break;
        }
        zoomRadio.value = 60;
        break;
      case 'file-edit':
        if (window.innerWidth < 1024) {
          zoomRadio.value = 80;
          break;
        }
        zoomRadio.value = 60;
        break;
      case 'code':
        if (window.innerWidth < 1024) {
          zoomRadio.value = 80;
          break;
        }
        zoomRadio.value = 60;
        break;
      case 'audio':
        if (window.innerWidth < 1024) {
          zoomRadio.value = 80;
          break;
        }
        zoomRadio.value = 50;
        break;
      case 'video':
        if (window.innerWidth < 1024) {
          zoomRadio.value = 80;
          break;
        }
        zoomRadio.value = 40;
        break;
      default:
        if (window.innerWidth < 1024) {
          zoomRadio.value = 80;
          break;
        }
        zoomRadio.value = 40;
        break;
    }
  },
  { immediate: true }
);

const zoomIn = () => {
  if (
    zoomRadio.value >= 100 ||
    (![
      'image',
      'file-pdf',
      'file-excel',
      'audio',
      'video',
      'file-edit',
      'code'
    ].includes(fileStore.curFileInfo.fileType.type) &&
      !['docx'].includes(fileStore.curFileInfo.type))
  )
    return;
  const resizeEvent = new Event('resize');
  zoomRadio.value += 10;
  nextTick(() => {
    window.dispatchEvent(resizeEvent);
  });
};
const zoomOut = () => {
  if (
    zoomRadio.value <= 10 ||
    (![
      'image',
      'file-pdf',
      'file-excel',
      'audio',
      'video',
      'file-edit',
      'code'
    ].includes(fileStore.curFileInfo.fileType.type) &&
      !['docx'].includes(fileStore.curFileInfo.type))
  )
    return;
  const resizeEvent = new Event('resize');
  zoomRadio.value -= 10;
  nextTick(() => {
    window.dispatchEvent(resizeEvent);
  });
};
const handleTransitionEnd = () => {
  const resizeEvent = new Event('resize');
  window.dispatchEvent(resizeEvent);
};
const exitPreview = () => {
  flagStore.setPreviewerOpen(false);
};

const downloadFile = async () => {
  isDownloadLoading.value = true;
  const result = await fileStore.downloadFile(fileStore.curFileInfo);
  if (!result) {
    toastStore.showToast({
      severity: 'error',
      summary: 'Error Message',
      detail: i18nStore.translate(
        'insufficient_download_remaining_please_recharge_to_download'
      ),
      life: 999999,
      group: 'upload_failed'
    });
  }
  isDownloadLoading.value = false;
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
